<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../resources/home/css/css.css" rel="stylesheet" type="text/css" />
<link href="../../resources/home/css/common.css" rel="stylesheet" tyle="text/css" />
<link href="../../resources/home/css/show.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../../resources/admin/easyui/easyui/1.3.4/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="../../resources/admin/easyui/css/wu.css" />
<link rel="stylesheet" type="text/css" href="../../resources/admin/easyui/css/icon.css" />
<script src="../../resources/home/js/jquery.min.1.8.2.js" type="text/javascript"></script>
<script src="../../resources/home/js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
<script src="../../resources/home/js/common_js.js" type="text/javascript"></script>
<script src="../../resources/home/js/footer.js" type="text/javascript"></script>
<script src="../../resources/home/js/jqzoom.js" type="text/javascript"></script>
<script type="text/javascript" src="../../resources/admin/easyui/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../../resources/admin/easyui/easyui/1.3.4/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../resources/admin/easyui/easyui/1.3.4/locale/easyui-lang-zh_CN.js"></script>
<title>产品名称详细介绍</title>
</head>
<style>
        table,table tr th, table tr td { border:1px solid #0094ff; }
</style>
<script>
	var charCount;
	$(function() {
		$("#content").val("");
		$("#buy-num").val("1");
	});
	function CountWords(obj, show_id){ 
	 
	 var fullStr = obj.value; 
	 charCount = fullStr.length;

	 var rExp = /[^A-Za-z0-9]/gi; 
	 var spacesStr = fullStr.replace(rExp, ' '); 
	 var cleanedStr = spacesStr + ' '; 
	 do{ 
	  var old_str = cleanedStr; 
	  cleanedStrcleanedStr = cleanedStr.replace(' ', ' '); 
	 }while( old_str != cleanedStr ); 
	  var splitString = cleanedStr.split(' '); 
	  document.getElementById(show_id).innerHTML=charCount; 
	} 
	
	function addMyCollect()
	{
		var data = $("#add_collect").serialize();
		$.ajax({
			type: "post",
			url: "/TeaShop/home/account/add_collect",
			data: data, 
			dataType: "json", //返回数据类型
			success: function(result){
				if(result.type == 'success'){
					
					$.messager.alert("消息提醒", result.msg, "info");
				}
				else{
					$.messager.alert("消息提醒", result.msg, "warning");
					
				}
				
			}
			
		});
		
	}
	
	function submitComment()
	{
		if(charCount>100)
		{
			$.messager.alert("消息提醒", "评论字数不能大于100个!", "warning");
			return;
		}
		
		if($("#content").val() == ''){
			$.messager.alert("消息提醒", "评论内容不能为空!", "warning");
			return;
		}
		 var data = $("#commentForm").serialize();
		$.ajax({
			type: "post",
			url: "/TeaShop/home/comment/add",
			data: data, 
			dataType: "json", //返回数据类型
			success: function(result){
				if(result.type == 'success'){
					$("#content").val("");
					$.messager.alert("消息提醒", result.msg,"info",function () {window.location.href = "/TeaShop/home/product/detail?page=1&rows=5&temp=refresh&productId="+${productId};});
			
					
				}
				else{
					$.messager.alert("消息提醒", result.msg, "warning");
					
				}
				
			}
			
		}); 
		
	}
	
	function reduce()
	{
		var num = $("#buy-num").val();
		if(num==1)
		{
			$("#buy-num").val(num);
		}else{
			num--;
			$("#buy-num").val(num);
		}
	}
	
	function add()
	{
		var num = $("#buy-num").val();
		num++;
		$("#buy-num").val(num);
	}
	
	
	
	function add_Cart()
	{
		var num = $("#buy-num").val();
		
		$("#shopping_num").val(num);
		if(num>0)
		{
			 var data = $("#submitShopping").serialize();
				$.ajax({
					type: "post",
					url: "/TeaShop/home/shopping/add_cart",
					data: data, 
					dataType: "json", //返回数据类型
					success: function(result){
						if(result.type == 'success'){
						
						$.messager.alert("消息提醒", result.msg,"info",function(){window.location.href = "/TeaShop/home/product/detail?productId="+${productId};});
						}
						else{
							$.messager.alert("消息提醒", result.msg, "warning");
							
						}
						
					}
					
				}); 
		}else{
			$.messager.alert("消息提醒", "请正确选择商品数量", "warning");
		}
		
		
	}
	function buy_Now()
	{
		var num = $("#buy-num").val();
		
		$("#shopping_num").val(num);
		if(num>0)
		{
			 var data = $("#submitShopping").serialize();
				$.ajax({
					type: "post",
					url: "/TeaShop/home/shopping/add_cart",
					data: data, 
					dataType: "json", //返回数据类型
					success: function(result){
						if(result.type == 'success'){
						
							window.location.href = "/TeaShop/home/shopping/cart";
						}
						else{
							$.messager.alert("消息提醒", result.msg, "warning");
							
						}
						
					}
					
				}); 
		}else{
			$.messager.alert("消息提醒", "请正确选择商品数量", "warning");
		}
		
		
	}

</script>
<body>
<%@include file="../common/common_top.jsp"%>
<!--导航栏样式-->
<div id="Menu" class="clearfix">
<div class="Menu_style">
  <div id="allSortOuterbox" class="display">
    <div class="Category"><a href="/TeaShop/home/product/list" class="Menu_img"><em></em></a></div>
    <div class="hd_allsort_out_box_new">
	 <!--左侧栏目开始-->
	 <div class="Menu_list">	
	    <div class="menu_title">茶叶品种</div>
        	<c:forEach items="${teaCategoryList}" var="teaCategory">
				<a href="${teaCategory.href}">${teaCategory.name}</a>
			</c:forEach>
	</div>	
    <div class="Menu_list">	
	    <div class="menu_title">茶叶价格</div>
        <a href="/TeaShop/home/product/list?price=1&flag2=1">100以下</a>
        <a href="/TeaShop/home/product/list?price=2&flag2=1">100-200</a>
        <a href="/TeaShop/home/product/list?price=3&flag2=1">200-400</a>
        <a href="/TeaShop/home/product/list?price=4&flag2=1">400-600</a>
        <a href="/TeaShop/home/product/list?price=5&flag2=1">600-1000</a>
        <a href="/TeaShop/home/product/list?price=6&flag2=1">1000以上</a>
	</div>	
     <div class="Menu_list">	
	    <div class="menu_title">推荐茶叶</div>
        <ul class="recommend">
        	<c:set var="count" value="0"></c:set>
            <c:forEach items="${teaListByActionId}" var="tea">
               		<!-- 只允许显示2个 -->
               		<c:if test="${count < 2}">
	         			 	<li><a href="${tea.href}" title="${tea.name}">${tea.name}</a></li>
	               		  	<c:set var="count" value="${count+1}"></c:set>
         			</c:if>
         	</c:forEach>
        </ul>
	</div>	
	</div>		
	</div>
    <div class="Navigation" id="Navigation">
		 <ul class="Navigation_name">
			<li><a class="nav_on" id="mynav"  href="/TeaShop/home/system/index"><span>首页</span></a></li>
			<c:forEach items="${teaCategoryList}" var="teaCategory">
				<li><a class="nav_on" id="mynav"  href="${teaCategory.href}"><span>${teaCategory.name}</span></a></li>
			 </c:forEach>
		 </ul>			 
		</div>
    <!--购物车-->	 
     <div class="hd_Shopping_list" id="Shopping_list">
   <div class="s_cart"><em></em><a href="/TeaShop/home/shopping/cart">我的购物车</a> <i class="ci-right">&gt;</i><i class="ci-count" id="shopping-amount">${cartTotal}</i></div>
   <div class="dorpdown-layer">
        <div class="spacer"></div>
	 <!--<div class="prompt"></div><div class="nogoods"><b></b>购物车中还没有商品，赶紧选购吧！</div>-->
	 <ul class="p_s_list">
	 
	 	 <c:set var="totalPrice" value="0"></c:set>
 		 <c:forEach items="${cartList}" var="cart" varStatus="vs">
			  <li>
			    <div class="img"><img src="${cart.tea.photo}" style="width:40px;height:40px;"></div>
			    <div class="content">
			      <p><a href="${cart.tea.href}">${cart.tea.name}</a></p><p>${cart.tea.info}</p>
			    </div>
				<div class="Operations">
				<p class="Price">￥${cart.tea.new_price}</p>
				<p>数量：${cart.num}</p></div>
			  </li>
			   <c:set var="totalPrice" value="${totalPrice+cart.tea.new_price*cart.num}"></c:set>
		 </c:forEach>
		  
	</ul>		
	 <div class="Shopping_style">
	 <div class="p-total">共<b>${cartTotal}</b>件商品　共计<strong>￥ ${totalPrice}</strong></div>
	  <a href="/TeaShop/home/shopping/cart" title="去购物车结算" id="btn-payforgoods" class="Shopping">去购物车结算</a>
	 </div>	 
   </div>	
  </div>
</div>
</div>
<!--内页样式-->
<div class="Inside_pages">
<!--面包屑-->
 <div class="Location_link">
     <em></em><a href="/TeaShop/home/product/list">全部商品</a>    
     	<c:forEach items="${teaList}" var="tea">
			<a href="/TeaShop/home/product/list?categoryId=${tea.teaCategory.id}"> &lt;${tea.teaCategory.name}</a>
		</c:forEach>
		<c:forEach items="${teaList}" var="tea">
			<a href="/TeaShop/home/product/detail?productId=${tea.id}"> &lt;${tea.name}&nbsp;&nbsp;&nbsp;&nbsp;详细介绍</a>
		</c:forEach>
     	
     </div>
 <!--产品购买介绍样式-->
 <div class="Detailed">
     <!--产品详细介绍-->
 <div class="Details_style clearfix" id="goodsInfo">
  <div class="mod_picfold clearfix">
    <div class="clearfix" id="detail_main_img">
	 <div class="layout_wrap preview">
     <div id="vertical" class="bigImg">
     
     	<c:forEach items="${teaList}" var="tea">
	  		<img src="${tea.photo}" style="width:400px;height:400px;" alt="图片缺失" id="midimg" />
		 </c:forEach>
		
		<div style="display:none;" id="winSelector"></div>
	</div>
     <div class="smallImg">
		<div class="scrollbutton smallImgUp disabled">&lt;</div>
		<div id="imageMenu">
			<ul>
				<c:forEach items="${teaList}" var="tea">
			  		<li><img src="${tea.photo}" width="68" height="68" alt="图片缺失"/></li>
				</c:forEach>
			</ul>
		</div>
		<div class="scrollbutton smallImgDown">&gt;</div>
	</div><!--smallImg end-->	
	<div id="bigView" style="display:none;"><div><img width="800" height="800" alt="" src="" /></div></div>
	 </div>
  
	</div>
		 <div class="Sharing">
	 <div class="bdsharebuttonbox bdshare-button-style0-16" data-bd-bind="1441079683326"><a href="#" class="bds_more" data-cmd="more">分享到：</a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a></div>
<script>
window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{"bdSize":16},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
</script>
  <!--收藏-->
	  <div class="Collect">
	  	<form id="add_collect" method="post">
	  		<c:forEach items="${teaList}" var="tea">
	  			<input type="hidden" name="photo" value="${tea.photo}">
	    		<input type="hidden" name="name" value="${tea.name}">
	    		<input type="hidden" name="productId" value="${tea.id}">
	    		<input type="hidden" name="accountId" value="${account.id}">
	    		<input type="hidden" name="price" value="${tea.new_price}">
		  		<a href="javascript:void(0);" onclick="addMyCollect();" ><em class="ico1"></em>收藏商品</a>
			</c:forEach>
		</form>
	  </div>
	 </div>
   </div> 
   <!--信息样式-->
    <div class="textInfo">
    
	  <div class="title">
	  	<c:forEach items="${teaList}" var="tea">
	  		<h1>${tea.name}</h1>
	  		<p>${tea.info}</p>
	  	</c:forEach>
	  </div>
	  <div class="mod_detailInfo_priceSales">
	  <div class="margins">
	  <div class="Price clearfix text_name"><label>价格</label><span class="Prices">
		  <c:forEach items="${teaList}" var="tea">
		  		<h4>¥${tea.new_price}</h4><b>${tea.pre_price}</b>
	  	  </c:forEach>
	  </span>
	  </div>
	  <div class="Activity clearfix text_name"><label>重量</label>
	  	<c:forEach items="${teaList}" var="tea">
	  		<span class="weight">${tea.weight}克</span>
	  	</c:forEach>
	  </div>
      <div class="Activity clearfix text_name"><label>活动：</label>
      	<c:forEach items="${teaList}" var="tea">
	  		<span class="weight">${tea.action.name}</span>
	  	</c:forEach>
      </div>
      <div class="Sales_volume">
       <div class="Sales_info"><h5>销量</h5>
	       	<c:forEach items="${teaList}" var="tea">
		  		<b>${tea.saleNumber}</b>
		  	</c:forEach>
       	</div>
      </div>
	  </div>
	  <div class="s_Review">
	  	 <c:forEach items="${teaList}" var="tea">
		  		[评论<b>${tea.commentNumber}</b>条]
		 </c:forEach>
	   
	  </div>
	  </div>
	 <form id="submitShopping"> 
	 	<input type="hidden" name="productId" value="${productId}">
	 	<input type="hidden" name="accountId" value="${account.id}">
	 	<input type="hidden" id="shopping_num" name="num">
	 	 <c:forEach items="${teaList}" var="tea">
	  		<input type="hidden" name="stock" value="${tea.stock}">
		 </c:forEach>
		 <div class="buyinfo" id="detail_buyinfo">
			<dl>
	        <dt>数量</dt>
	        <dd>
			  <div class="choose-amount left">
				<a class="btn-reduce" href="javascript:;" onclick="reduce();">-</a>
				<a class="btn-add" href="javascript:;" onclick="add();">+</a>
				<input id="buy-num"  value="1" type='text' onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')">	
			 </div>
			 <div class="P_Quantity">剩余：
				  <c:forEach items="${teaList}" var="tea">
				  		${tea.stock}件
				 </c:forEach>
			 </div>        
	        </dd>
		  <dd>
		    <div class="wrap_btn"> <a href="javascript:void(0);" onclick="add_Cart();" class="wrap_btn1" title="加入购物车"></a> 
			  <a href="javascript:void(0);" onclick="buy_Now();" class="wrap_btn2" title="立即购买"></a> </div>
			  </dd>
		  </dl>
		  </div>
	  </form>
	  <div class="Guarantee clearfix">
	   <dl><dt>商城服务</dt><dd><em></em>正品保障</dd><dd><em></em>售后无忧</dd><dd><em></em>原产认证</dd> 
	   <dd class="manner">
	  </dd></dl></div>	  
	
  </div>
  </div> 
 </div>
 <!---->
  <div class="clearfix">
  <div class="left_style">
   <div class="Records">
     <div class="title_name">用户浏览记录</div>
	 <ul>
	 	<c:forEach items="${viewList}" var="view">
		  <li>
		   <a href="${view.tea.href}">
		   <p><img src="${view.tea.photo}" data-bd-imgshare-binded="1"></p>
		   <p class="p_name">${view.tea.name}</p>
		   </a>
		   <p><span class="p_Price">￥${view.tea.new_price}</span><b>${view.tea.pre_price}</b></p>
		  </li>
	 	</c:forEach>
	 </ul>
   </div>
   </div>
   <div class="right_style">
    <div class="inDetail_boxOut ">
	 <div class="inDetail_box">
	  <div class="fixed_out ">
	   <ul class="inLeft_btn fixed_bar">
           <li><a id="coms1-id" href="#coms1">买家评论</a></li>
       </ul>
	  </div>
      <!---->
      <div class="product_details">
      
      <div id="coms1">
        <div class="productContent" id="status2">
	 <div class=""></div>

	  <div class="commentBox" style="display: block;">
		<form  method="post" id="commentForm">
		  <c:forEach items="${teaList}" var="tea">
	  		 <input type="hidden" name="productId" value="${tea.id}">
	  	  </c:forEach>
		
		  <h4>评论内容</h4>
		  <div class="bd">
			<textarea name="content" id="content" class="textarea_long"  onkeyup="CountWords(this,'show')"></textarea>
			<p class="g">
			  <label>&nbsp; </label>
			  <a href="javascript:void(0)" onclick="submitComment();"><input type="button" value="发表" class="btn_common"></a>
			  <span t="word_calc" class="word"><b id="show">0</b>/100</span> </p>
		  </div>
		</form>
		</div>
		<div id="ECS_COMMENT"> <div class="Comment">
<div class="CommentTab">
  <ul>
	<li class="active">全部评论(0)</li>
	
  </ul>
</div>
<div class="CommentText" id="goodsdetail_comments_list" style="display:block">
  	<ul class="clearfix">
  			
	  </ul>
  <div class="discuss_Paging">
	<c:set var="count" value="${offset}"></c:set>
	 <!--每页5个 -->
  	<c:forEach items="${commentList}" var="comment">
		 <c:set var="count" value="${count+1}"></c:set>
		 <p><span style="line-height:22px;font-size:14px;color:#347BC4;">${comment.account.username}</span><span style="color:#888;line-height:22px;font-size:14px;">(<fmt:formatDate value="${comment.time}" pattern="yyyy-MM-dd HH:mm:ss"/>)</span>
			  <span style="position:absolute;right:150px;font-size:16px;color:#ccc;">#${count}</span><br><span style="color:#888;line-height:22px;font-size:14px;">${comment.content}</span>
		 </p>
		 <br>
 	</c:forEach>
	  
	<div class="discuss"> 
			
	  <span class="f_l f6" style="margin-left:10px;">共 <b>${commentTotal}</b> 条评论</span>
	  
	  <p id="commentPager_4"> 
	  <a href="/TeaShop/home/product/detail?page=1&rows=5&productId=${productId}">首页</a> 
	  
	  <!-- 上一页 -->
   	 <c:if test="${currentPage != 1}">
     	<a class="prev" href="/TeaShop/home/product/detail?page=${currentPage-1}&rows=5&productId=${productId}">&lt;上一页</a>
     </c:if>
     <c:if test="${currentPage == 1}">
     	<a class="prev" href="javascript:void(0);">没有上一页了</a>
     </c:if>
	           
	  <!-- 中间部分 -->
     <c:forEach begin="1" end="${totalPage}" step="1" var="item">
     	
		<c:if test="${item == currentPage-2}">
		 		<a href="/TeaShop/home/product/detail?page=${item}&rows=5&productId=${productId}">${item}</a>
		</c:if>
		<c:if test="${item == currentPage-1}">
		 		<a href="/TeaShop/home/product/detail?page=${item}&rows=5&productId=${productId}">${item}</a>
		</c:if>
		<c:if test="${item == currentPage}">
		 	<a href="/TeaShop/home/product/detail?page=${item}&rows=5&productId=${productId}" class="on">${item}</a>
		</c:if>
		<c:if test="${item == currentPage+1}">
		 		<a href="/TeaShop/home/product/detail?page=${item}&rows=5&productId=${productId}">${item}</a>
		</c:if>
		<c:if test="${item == currentPage+2}">
		 		<a href="/TeaShop/home/product/detail?page=${item}&rows=5&productId=${productId}">${item}</a>
		</c:if>
	 </c:forEach>
	  
	 
	   <!-- 下一页 -->
	 <c:if test="${currentPage != totalPage}">
	 	<a class="next" href="/TeaShop/home/product/detail?page=${currentPage+1}&rows=5&productId=${productId}">下一页&gt;</a>
	 </c:if>
	 <c:if test="${currentPage == totalPage}">
	 	<a class="next" href="javascript:void(0);">没有下一页了</a>
	 </c:if>
	                 
	  
	  
	  
	        
	  <a class="last" href="/TeaShop/home/product/detail?page=${totalPage}&rows=5&productId=${productId}">尾页</a>	 
	  
	  
	   
	   </p>
	</div>
  </div>
</div>
</div>

</div>
   
    </div>
      </div>
      </div>
	 </div>	  
	</div>
   </div>
  </div>
 
</div>
<%@include file="../common/footer.jsp"%>
</body>
</html>
